<template>
  <div class="app-container" style="padding: 5px;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="洋桔梗订单参照" name="first">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">筛选条件</span>
            </div>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="110px" label-position="top">
              <el-form-item label="片区" prop="department">
                <el-select v-model="queryParams.department" filterable @change="handleQuery">
                  <el-option v-for="item in depts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="销售" prop="saleName">
                <el-select v-model="queryParams.saleName" filterable @change="handleQuery">
                  <el-option v-for="item in sales" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户姓名" prop="customerName">
                <el-select v-model="queryParams.customerName" filterable @change="handleQuery">
                  <el-option v-for="item in customers" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发货时间-起始日期" prop="fhDateStart">
                <el-date-picker v-model="queryParams.fhDateStart" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
              </el-form-item>
              <el-form-item label="发货时间-结束日期" prop="fhDateEnd">
                <el-date-picker v-model="queryParams.fhDateEnd" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleQuery"></el-date-picker>
              </el-form-item>
              <el-form-item label="用友商品名称" prop="yongyouName">
                <el-input v-model="queryParams.yongyouName" @keyup.enter.native="handleQuery"></el-input>
              </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
          </el-card>

          <el-card class="box-card" style="margin-top: 10px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color:green;font-size: 16px;">洋桔梗-已维护品种</span><span style="font-weight: bold;color: #0099ff;font-size: 16px;">—销售订单参考</span> <el-button type="success" plain icon="el-icon-download" @click="handleExport" style="margin-left:10px;" v-if="details.length>0" size="mini">导出</el-button>
            </div>
            <el-table v-loading="loading" :data="details" border height="500" stripe>
                <el-table-column label="发货日期" align="center" prop="fhDateLabel" width="120" />
                <el-table-column label="用友名称" align="left" prop="yongyouName" width="400" />
                <el-table-column label="品种大类" align="center" prop="type0" />
                <el-table-column label="用友CODE" align="left" prop="yongyouCode"/>
                <el-table-column label="助记码" align="center" prop="memCode" />
                <el-table-column label="用友合同CODE" align="center" prop="yongyouHtcode" width="180"  />
                <el-table-column label="合同日期" align="center" prop="htDateLabel" />
                <el-table-column label="销售名称" align="center" prop="saleName"/>
                <el-table-column label="片区" align="center" prop="department" />
                <el-table-column label="客户名称" align="center" prop="customerName" />
                <el-table-column label="此订单需求盘数" align="center" prop="nums"/>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
          </el-card>

        <el-row>
            <el-col :span="16">
              <el-card class="box-card" style="margin-top: 10px;">
                <div slot="header" class="clearfix">
                  <span style="font-weight: bold;color:red;font-size: 16px;">洋桔梗种苗</span><span style="font-weight: bold;color: #0099ff;font-size: 16px;">—采购参考</span> <el-button type="success" plain icon="el-icon-download" @click="handleExportYjgCg" style="margin-left:10px;" v-if="yjgCgList.length>0" size="mini">导出</el-button>
                </div>
                <el-table v-loading="loading1" :data="yjgCgList" border height="960" stripe>
                  <el-table-column label="发货日期" align="center" prop="fhDate" width="120" fixed />
                  <el-table-column label="用友名称" align="left" prop="yongyouName" width="300" fixed/>
                  <el-table-column label="规格" align="center" prop="spec" />
                  <el-table-column label="客户名称" align="left" prop="agentidName"/>
                  <el-table-column label="采购英文名" align="left" prop="cpEnName" width="250" />
                  <el-table-column label="采购中文名" align="left" prop="cgNameCn" width="250"  />
                  <el-table-column label="助记码" align="center" prop="memCode" />
                  <el-table-column label="种苗数" align="center" prop="zmNums"/>
                  <el-table-column label="订单需求种子数" align="center" prop="zzNums" width="160" />
                </el-table>
                <pagination v-show="total1 > 0" :total="total1" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getyjgCgList" />
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card" style="margin-top: 10px;">
                    <div slot="header" class="clearfix">
                      <span style="font-weight: bold;color:orange;font-size: 16px;">洋桔梗种苗规格参考</span> <el-button type="success" plain icon="el-icon-download" @click="handleExportSpecs" style="margin-left:10px;" v-if="specList.length>0" size="mini">导出</el-button>
                    </div>
                    <el-table :data="specList" border height="460" stripe>
                      <el-table-column label="发货日期" align="center" prop="rq" />
                      <el-table-column label="规格" align="center">
                        <el-table-column label="1276穴" align="center" prop="t1276" />
                        <el-table-column label="864穴" align="center" prop="t864" />
                        <el-table-column label="总和" align="center" prop="sum" />
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card" style="margin-top: 5px;">
                    <div slot="header" class="clearfix">
                      <span style="font-weight: bold;color:orange;font-size: 16px;">洋桔梗种苗负责人参考</span> <el-button type="success" plain icon="el-icon-download" @click="handleExportCustomer" style="margin-left:10px;" v-if="customerList.length>0" size="mini">导出</el-button>
                    </div>
                    <el-table :data="customerList" border height="460" stripe>
                      <el-table-column label="发货日期" align="center" prop="rq" />
                      <el-table-column label="客户分类" align="center" prop="customer" />
                      <el-table-column label="规格" align="center">
                        <el-table-column label="1276穴" align="center" prop="t1276" />
                        <el-table-column label="864穴" align="center" prop="t864" />
                        <el-table-column label="总和" align="center" prop="sum" />
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="洋桔梗种子-未满足订单" name="second">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color:#0099ff;font-size: 16px;">需要补充库存的品种</span><span style="font-size: 14px;color: red;margin-left: 5px;">[截止日期：{{ latest }}]</span><span style="font-size: 12px;color: blue;margin-left: 10px;">共{{ UnsupplyList.length }}条数据</span>
            </div>
            <el-table :data="UnsupplyList" border height="460" stripe>
              <el-table-column label="供应商中文名" align="center" prop="sup_cn_name" width="100" />
              <el-table-column label="供应商英文名" align="center" prop="sup_en_name" width="100" />
              <el-table-column label="助记码" align="center" prop="mem_code" width="100" />
              <el-table-column label="采购中文名" align="left" prop="cg_name_cn" width="150"  />
              <el-table-column label="采购英文名" align="left" prop="cp_en_name" />
              <el-table-column align="left" prop="dq_kc" width="800">
                <template slot-scope="scope">
                    <table>
                        <tr>
                            <td><el-progress :stroke-width="30" :percentage="scope.row.cent" :format="format" /></td>
                            <td><span style="font-weight: bold;">{{ scope.row.dq_kc }}</span></td>
                        </tr>
                    </table>
                </template>
            </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" style="margin-top: 5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color:#0099ff;font-size: 16px;">需要补采-发货维度</span><span style="font-size: 14px;color: red;margin-left: 5px;">[截止日期：{{ latest }}]</span> <el-button type="success" plain icon="el-icon-download" @click="handleResamplingList" style="margin-left:10px;" v-if="resamplingList.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="resamplingList" border height="500" stripe>
              <el-table-column label="发货日期" align="center" prop="consigntime" width="120" fixed/>
              <el-table-column label="助记码" align="center" prop="mem_code" fixed/>
              <el-table-column label="采购中文名" align="left" prop="cg_name_cn" width="200" fixed/>
              <el-table-column label="采购英文名" align="left" prop="cp_en_name" width="220" />
              <el-table-column label="供应商中文名" align="center" prop="sup_cn_name" width="100"/>
              <el-table-column label="供应商英文名" align="center" prop="sup_en_name" width="100"/>
              <el-table-column label="种子CODE" align="center" prop="zz_code" width="120"/>
              <el-table-column label="当期库存" align="right" prop="dq_kc"/>
              <el-table-column label="1276转换" align="right" prop="t1276"/>
              <el-table-column label="1014转换" align="right" prop="t1014"/>
              <el-table-column label="864转换" align="right" prop="t864"/>
            </el-table>
            <pagination v-show="total3 > 0" :total="total3" :page.sync="queryParams3.pageNum" :limit.sync="queryParams3.pageSize" @pagination="getResample" />
          </el-card>
          <el-card class="box-card" style="margin-top: 5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color:#0099ff;font-size: 16px;">未满足影响的订单</span><span style="font-size: 14px;color: red;margin-left: 5px;">[截止日期：{{ latest }}]</span> <el-button type="success" plain icon="el-icon-download" @click="handleUnfulfilledList" style="margin-left:10px;" v-if="unfulfilledList.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="unfulfilledList" border height="500" stripe>
              <el-table-column label="发货日期" align="center" prop="fh_date_label" width="120"/>
              <el-table-column label="助记码" align="center" prop="mem_code"/>
              <el-table-column label="用友名称" align="left" prop="yongyou_name"/>
              <el-table-column label="用友合同" align="left" prop="yongyou_htcode" />
              <el-table-column label="合同日期" align="center" prop="ht_date" width="100"/>
              <el-table-column label="销售名称" align="center" prop="sale_name" width="100"/>
              <el-table-column label="片区" align="center" prop="department" width="120"/>
              <el-table-column label="客户名称" align="right" prop="customer_name"/>
              <el-table-column label="此订单需求盘数" align="right" prop="nums">
                <template slot-scope="scope">
                  {{ scope.row.nums }} <span style="color:#0099ff">盘</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total4 > 0" :total="total4" :page.sync="queryParams4.pageNum" :limit.sync="queryParams4.pageSize" @pagination="getUnfulfilled" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="洋桔梗种子-多余种子去库存" name="third">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color:#0099ff;font-size: 16px;">多余种子去库存品种</span><el-button type="success" plain icon="el-icon-download" @click="handleInventoryList" style="margin-left:10px;" v-if="inventoryList.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="inventoryList" border height="900" stripe>
              <el-table-column label="供应商中文名" align="center" prop="sup_cn_name" width="100" />
              <el-table-column label="供应商英文名" align="center" prop="sup_en_name" width="100" />
              <el-table-column label="采购中文名" align="left" prop="cg_name_cn" width="180"  />
              <el-table-column label="采购英文名" align="left" prop="cp_en_name" width="250" />
              <el-table-column label="助记码" align="center" prop="mem_code" width="100" />
              <el-table-column align="left" prop="dq_kc" width="250" label="当期库存">
                <template slot-scope="scope">
                    <table>
                        <tr>
                            <td><el-progress class="progressmini" :stroke-width="30" :percentage="scope.row.cents" :format="format" /></td>
                            <td><span style="font-weight: bold;">{{ scope.row.dq_kc }}</span></td>
                        </tr>
                    </table>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="t1276" width="240" label="1276穴转换">
                  <template slot-scope="scope">
                      <table>
                          <tr>
                              <td><el-progress class="progressmini" :stroke-width="30" :percentage="scope.row.cent1276" :format="format" /></td>
                              <td><span style="font-weight: bold;">{{ scope.row.t1276 }}</span><span style="color: dodgerblue;">盘</span></td>
                          </tr>
                      </table>
                  </template>
              </el-table-column>
              <el-table-column align="left" prop="t1014" width="240" label="1014穴转换">
                  <template slot-scope="scope">
                      <table>
                          <tr>
                              <td><el-progress class="progressmini" :stroke-width="30" :percentage="scope.row.cent1014" :format="format" /></td>
                              <td><span style="font-weight: bold;">{{ scope.row.t1014 }}</span><span style="color: dodgerblue;">盘</span></td>
                          </tr>
                      </table>
                  </template>
              </el-table-column>
              <el-table-column align="left" prop="t864" width="240" label="864穴转换">
                  <template slot-scope="scope">
                      <table>
                          <tr>
                              <td><el-progress class="progressmini" :stroke-width="30" :percentage="scope.row.cent864" :format="format" /></td>
                              <td><span style="font-weight: bold;">{{ scope.row.t864 }}</span><span style="color: dodgerblue;">盘</span></td>
                          </tr>
                      </table>
                  </template>
              </el-table-column>
            </el-table>
          </el-card>

          <el-card class="box-card" style="margin-top: 5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color:#0099ff;font-size: 16px;">洋桔梗种子-多余库存-明细</span><el-button type="success" plain icon="el-icon-download" @click="handleInventoryDetailList" style="margin-left:10px;" v-if="inventoryDetailList.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="inventoryDetailList" border height="500" stripe>
              <el-table-column label="发货日期" align="center" prop="consigntime" width="120" />
              <el-table-column label="供应商中文名" align="center" prop="sup_cn_name" />
              <el-table-column label="供应商英文名" align="left" prop="sup_en_name" />
              <el-table-column label="助记码" align="left" prop="mem_code" />
              <el-table-column label="采购中文名" align="center" prop="cg_name_cn" />
              <el-table-column label="采购英文名" align="center" prop="cp_en_name" />
              <el-table-column label="当期库存" align="center" prop="dq_kc" />
            </el-table>
            <pagination v-show="total5 > 0" :total="total5" :page.sync="queryParams5.pageNum" :limit.sync="queryParams5.pageSize" @pagination="getInventoryDetail" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="洋桔梗种苗-采购进度" name="fourth">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #0099ff;font-size: 16px;">筛选条件</span>
            </div>
            <el-form :model="queryParams6" ref="queryForm1" size="small" :inline="true" label-width="90px">
              <el-form-item label="发货日期: " prop="dateRange">
                <el-date-picker v-model="queryParams6.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleQuery6"></el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="助记码: " prop="memCode">
                <el-input v-model="queryParams6.memCode" placeholder="输入助记码" clearable @keyup.enter.native="handleQuery6"></el-input>
              </el-form-item>
              <el-form-item label="采购中文名: " prop="cgNameCn">
                <el-input v-model="queryParams6.cgNameCn" placeholder="输入采购中文名" clearable @keyup.enter.native="handleQuery6"></el-input>
              </el-form-item> -->
            </el-form>
          </el-card>
          <el-card style="margin-top:5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋桔梗种苗<span style="color:red;">未满足</span>-1276穴-采购进度</span>
              <el-button type="success" plain icon="el-icon-download" @click="handleExport1276" style="margin-left:10px;" v-if="yjg1276List.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="yjg1276List" border stripe :span-method="rowSpanMethod1276">
              <el-table-column label="规格" align="center" prop="spec" width="80"></el-table-column>
              <el-table-column label="用友code" align="left" prop="realproductcode" width="120"></el-table-column>
              <el-table-column label="助记码" align="left" prop="mem_code" width="80"></el-table-column>
              <el-table-column label="采购中文名" align="left" prop="cg_name_cn" width="150"></el-table-column>
              <el-table-column label="用友名称" align="left" prop="yongyou_name" width="200"></el-table-column>
              <el-table-column label="订单需求种苗数" align="left">
                <template slot-scope="scope">
                  <table>
                    <tr>
                      <td><el-progress class="progressmini2" :stroke-width="30" :percentage="scope.row.zmqty" :format="format" /></td>
                      <td><span style="font-weight: bold;">{{ scope.row.zmqty }}</span><span style="color: dodgerblue;">盘</span></td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
              <el-table-column label="需要补采的数量" align="left">
                <template slot-scope="scope">
                  <table>
                    <tr>
                      <td><span style="font-weight: bold;">{{ scope.row.qhqty }}</span><span style="color: dodgerblue;">盘</span></td>
                      <td><el-progress class="progressmini3" :stroke-width="30" :percentage="Math.abs(scope.row.qhqty)" :format="format" /></td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <!-- <el-card style="margin-top:5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋桔梗种苗<span style="color:red;">未满足</span>-1014穴-采购进度</span>
            </div>
            <el-table :data="yjg1014List" border stripe :span-method="rowSpanMethod1014">
              <el-table-column label="规格" align="center" prop="spec" width="80"></el-table-column>
              <el-table-column label="用友code" align="left" prop="realproductcode" width="120"></el-table-column>
              <el-table-column label="助记码" align="left" prop="mem_code" width="80"></el-table-column>
              <el-table-column label="采购中文名" align="left" prop="cg_name_cn" width="150"></el-table-column>
              <el-table-column label="用友名称" align="left" prop="cg_name_cn" width="200"></el-table-column>
              <el-table-column label="用友名称" align="left" prop="cg_name_cn" width="200"></el-table-column>
              <el-table-column label="订单需求种苗数" align="left">
                <template slot-scope="scope">
                  <table>
                    <tr>
                      <td><el-progress class="progressmini2" :stroke-width="30" :percentage="scope.row.zmqty/50" :format="format" /></td>
                      <td><span style="font-weight: bold;">{{ scope.row.zmqty }}</span><span style="color: dodgerblue;">盘</span></td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
              <el-table-column label="需要补采的数量" align="left">
                <template slot-scope="scope">
                  <table>
                    <tr>
                      <td><span style="font-weight: bold;">{{ scope.row.qhqty }}</span><span style="color: dodgerblue;">盘</span></td>
                      <td><el-progress class="progressmini3" :stroke-width="30" :percentage="Math.abs(scope.row.qhqty)/5" :format="format" /></td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
            </el-table>
          </el-card> -->
          <el-card style="margin-top:5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋桔梗种苗<span style="color:red;">未满足</span>-864穴-采购进度</span>
              <el-button type="success" plain icon="el-icon-download" @click="handleExport864" style="margin-left:10px;" v-if="yjg864List.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="yjg864List" border stripe :span-method="rowSpanMethod864">
              <el-table-column label="规格" align="center" prop="spec" width="80"></el-table-column>
              <el-table-column label="用友code" align="left" prop="realproductcode" width="120"></el-table-column>
              <el-table-column label="助记码" align="left" prop="mem_code" width="80"></el-table-column>
              <el-table-column label="采购中文名" align="left" prop="cg_name_cn" width="150"></el-table-column>
              <el-table-column label="用友名称" align="left" prop="yongyou_name" width="200"></el-table-column>
              <el-table-column label="订单需求种苗数" align="left">
                <template slot-scope="scope">
                  <table>
                    <tr>
                      <td><el-progress class="progressmini2" :stroke-width="30" :percentage="scope.row.zmqty" :format="format" /></td>
                      <td><span style="font-weight: bold;">{{ scope.row.zmqty }}</span><span style="color: dodgerblue;">盘</span></td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
              <el-table-column label="需要补采的数量" align="left">
                <template slot-scope="scope">
                  <table>
                    <tr>
                      <td><span style="font-weight: bold;">{{ scope.row.qhqty }}</span><span style="color: dodgerblue;">盘</span></td>
                      <td><el-progress class="progressmini3" :stroke-width="30" :percentage="Math.abs(scope.row.qhqty)" :format="format" /></td>
                    </tr>
                  </table>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card style="margin-top:5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋桔梗种苗<span style="color:red;">未满足</span>-需补采订单</span>
              <el-button type="success" plain icon="el-icon-download" @click="handleExportBc" style="margin-left:10px;" v-if="jygBcList.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="jygBcList" border stripe :span-method="rowSpanMethodBc">
              <el-table-column label="发货日期" prop="fh_date"></el-table-column>
              <el-table-column label="规格" prop="spec"></el-table-column>
              <el-table-column label="客户分类" prop="cus_cls"></el-table-column>
              <el-table-column label="用友code" prop="realproductcode"></el-table-column>
              <el-table-column label="用友名称" prop="yongyou_name" width="300"></el-table-column>
              <el-table-column label="采购中文名" prop="cg_name_cn" width="200"></el-table-column>
              <el-table-column label="助记码" prop="mem_code"></el-table-column>
              <el-table-column label="客户名称" prop="agentid_name"></el-table-column>
              <el-table-column label="签单日期" prop="qd_date"></el-table-column>
              <el-table-column label="销售订单种苗数" prop="zmqty">
                <template slot-scope="scope">
                  <span style="font-weight: bold;">{{ scope.row.zmqty }}</span><span style="color: dodgerblue;">盘</span>
                </template>
              </el-table-column>
              <el-table-column label="订单需求种子数" prop="zzqty"></el-table-column>
              <el-table-column label="缺少盘数" prop="lack">
                <template slot-scope="scope">
                  <span style="font-weight: bold;color:red;">-{{ scope.row.lack }}</span><span style="color: dodgerblue;">盘</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card style="margin-top:5px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋桔梗种苗-<span style="color:green;">已满足且多余订单</span></span>
              <el-button type="success" plain icon="el-icon-download" @click="handleExportDy" style="margin-left:10px;" v-if="yjgRedundantList.length>0" size="mini">导出</el-button>
            </div>
            <el-table :data="yjgRedundantList" border stripe :span-method="rowSpanMethodDy">
              <el-table-column label="发货日期" prop="fh_date"></el-table-column>
              <el-table-column label="客户分类" prop="cus_type"></el-table-column>
              <el-table-column label="用友code" prop="yongyou_code"></el-table-column>
              <el-table-column label="用友名称" prop="yongyou_name" width="400"></el-table-column>
              <el-table-column label="产品英文名" prop="cp_en_name" width="400"></el-table-column>


              <el-table-column label="多余盘数" prop="qtys">
                <template slot-scope="scope">
                  <span style="font-weight: bold;">{{ scope.row.qtys }}</span><span style="color: dodgerblue;">盘</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  <script>
  import { getQueryParams,listCgMainDetails,listYjgCg,listSpecs,listCustomers,listUnsupply,listResampling,listUnfulfilled,listInventory,listInventoryDetail } from "@/api/system/cg/cgimport";
  import { listYjgBcSummary } from "@/api/system/cg/cgimport";
  export default {
    name: "Yjgddhz",
    data() {
      return {
        loading: true,
        total: 0,
        loading1: true,
        total1: 0,
        total3: 0,
        total4: 0,
        total5: 0,
        activeName: 'first',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          fhDateStart: null,
          fhDateEnd: null,
          yongyouName: null,
          department: null,
          saleName:null,
          customerName: null,
        },
        queryParams2: {
          pageNum: 1,
          pageSize: 20,
          fhDateStart: null,
          fhDateEnd: null,
        },
        queryParams3: {
          pageNum: 1,
          pageSize: 10,
          fhDateStart: null,
          fhDateEnd: null,
        },
        queryParams4: {
          pageNum: 1,
          pageSize: 10,
          fhDateStart: null,
          fhDateEnd: null,
        },
        queryParams5: {
          pageNum: 1,
          pageSize: 20,
        },
        queryParams6: {
          dateRange: [],
          startFhDate: null,
          endFhDate: null,
          memCode: null,
          cgNameCn: null,
        },
        depts:[],
        sales:[],
        customers:[],
        details:[],
        yjgCgList:[],
        specList: [],
        customerList: [],
        UnsupplyList:[],
        latest: null,
        resamplingList:[],
        unfulfilledList: [],
        inventoryList: [],
        inventoryDetailList: [],
        yjg1276List: [],
        yjg1014List: [],
        yjg864List: [],
        jygBcList: [],
        yjgRedundantList: [],
      };
    },
    created() {
      const year = new Date().getFullYear()+1;
      this.queryParams.fhDateStart = year+"-01-01";
      this.queryParams.fhDateEnd = year+"-12-31";
      this.getQueryParams();
      this.queryParams.department = "all";
      this.queryParams.saleName = "all";
      this.queryParams.customerName = "all";
      this.getList();
      this.getyjgCgList();
      this.getSpecList();
      this.getCustomerList();
    },
    methods: {
      format(percentage) {
        return '';
      },
      rowSpanMethodDy({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0 || this.yjgRedundantList[rowIndex - 1].fh_date !== row.fh_date) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.yjgRedundantList.length && this.yjgRedundantList[rowIndex + rowspan].fh_date === row.fh_date) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 1) {
          if (rowIndex === 0 || this.yjgRedundantList[rowIndex - 1].cus_type !== row.cus_type) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.yjgRedundantList.length && this.yjgRedundantList[rowIndex + rowspan].cus_type === row.cus_type) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      },
      rowSpanMethodBc({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].fh_date !== row.fh_date) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].fh_date === row.fh_date) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 1) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].spec !== row.spec) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].spec === row.spec) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 2) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].cus_cls !== row.cus_cls) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].cus_cls === row.cus_cls) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 3) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].realproductcode !== row.realproductcode) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].realproductcode === row.realproductcode) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 4) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].yongyou_name !== row.yongyou_name) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].yongyou_name === row.yongyou_name) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 5) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].cg_name_cn !== row.cg_name_cn) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].cg_name_cn === row.cg_name_cn) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
        if (columnIndex === 6) {
          if (rowIndex === 0 || this.jygBcList[rowIndex - 1].mem_code !== row.mem_code) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.jygBcList.length && this.jygBcList[rowIndex + rowspan].mem_code === row.mem_code) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      },
      rowSpanMethod1276({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0 || this.yjg1276List[rowIndex - 1].spec !== row.spec) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.yjg1276List.length && this.yjg1276List[rowIndex + rowspan].spec === row.spec) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      },
      rowSpanMethod1014({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0 || this.yjg1014List[rowIndex - 1].spec !== row.spec) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.yjg1014List.length && this.yjg1014List[rowIndex + rowspan].spec === row.spec) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      },
      rowSpanMethod864({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0 || this.yjg864List[rowIndex - 1].spec !== row.spec) {
            // 计算连续相同 ID 的行数
            let rowspan = 1;
            while (rowIndex + rowspan < this.yjg864List.length && this.yjg864List[rowIndex + rowspan].spec === row.spec) {
                rowspan++;
            }
            return { rowspan, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      },
      handleClick(tab, event) {
        if(tab.index==1){
          this.getDqkc();
          this.getResample();
          this.getUnfulfilled();
        }else if(tab.index==2){
          this.getInventoryList();
          this.getInventoryDetail();
        }else if(tab.index==3){
          const year = new Date().getFullYear()+1;
          this.queryParams6.memCode = null;
          this.queryParams6.cgNameCn = null;
          this.queryParams6.dateRange = [year+"-01-01",year+"-12-31"];
          this.getYjgBcSummary();
        }
      },
      getYjgBcSummary(){
        if(this.queryParams6.dateRange=="null"){
          const year = new Date().getFullYear()+1;
          this.queryParams6.dateRange = [year+"-01-01",year+"-12-31"];
        }
        this.queryParams6.startFhDate = this.queryParams6.dateRange[0];
        this.queryParams6.endFhDate = this.queryParams6.dateRange[1];
        listYjgBcSummary(this.queryParams6).then(res =>{
          this.yjg1276List = res.data.list1276;
          this.yjg1014List = res.data.list1014;
          this.yjg864List = res.data.list864;
          this.jygBcList = res.data.listBc;
          this.yjgRedundantList = res.data.listRedundant
        })
      },
      handleQuery6(){
        this.getYjgBcSummary();
      },
      getInventoryDetail(){
        listInventoryDetail().then(res =>{
          this.inventoryDetailList = res.rows;
          this.total5 = res.total;
        })
      },
      getInventoryList(){
        listInventory().then(res =>{
          this.inventoryList = res.data;
        })
      },
      getDqkc(){
        listUnsupply().then(res =>{
          this.UnsupplyList = res.data.list;
          this.latest = res.data.latest.latest;
        })
      },
      getResample(){
        listResampling(this.queryParams3).then(res =>{
          this.resamplingList = res.rows;
          this.total3 = res.total;
        })
      },
      getUnfulfilled(){
        listUnfulfilled(this.queryParams4).then(res =>{
          this.unfulfilledList = res.rows;
          this.total4 = res.total;
        })
      },
      getCustomerList(){
        if(this.queryParams.fhDateStart!=null&&this.queryParams.fhDateEnd!=null){
          this.queryParams2.fhDateStart = this.queryParams.fhDateStart;
          this.queryParams2.fhDateEnd = this.queryParams.fhDateEnd;
          listCustomers(this.queryParams2).then(res => {
              this.customerList = res.data;
            }
          );
        }else{
          this.$message.error("设置查询时间");
        }
      },
      getSpecList(){
        if(this.queryParams.fhDateStart!=null&&this.queryParams.fhDateEnd!=null){
          this.queryParams2.fhDateStart = this.queryParams.fhDateStart;
          this.queryParams2.fhDateEnd = this.queryParams.fhDateEnd;
          listSpecs(this.queryParams2).then(res => {
              this.specList = res.data;
            }
          );
        }else{
          this.$message.error("设置查询时间");
        }
      },
      getyjgCgList(){
        this.loading1 = true;
        if(this.queryParams.fhDateStart!=null&&this.queryParams.fhDateEnd!=null){
          this.queryParams2.fhDateStart = this.queryParams.fhDateStart;
          this.queryParams2.fhDateEnd = this.queryParams.fhDateEnd;
          listYjgCg(this.queryParams2).then(res => {
              this.yjgCgList = res.rows;
              this.total1 = res.total;
              this.loading1 = false;
            }
          );
        }else{
          this.$message.error("设置查询时间");
        }
      },
      getList(){
        this.loading = true;
        if(this.queryParams.fhDateStart!=null&&this.queryParams.fhDateEnd!=null){
          listCgMainDetails(this.queryParams).then(response => {
              this.details = response.rows;
              this.total = response.total;
              this.loading = false;
            }
          );
        }else{
          this.$message.error("设置查询时间");
        }
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        this.getyjgCgList();
        this.getSpecList();
        this.getCustomerList();
      },
      resetQuery(){
        this.resetForm("queryForm");
        this.queryParams.department = "all";
        this.queryParams.saleName = "all";
        this.queryParams.customerName = "all";
        this.handleQuery();
      },
      handleExport(){
        this.download('system/importcg/exportCgMainDetail', {
          ...this.queryParams
        }, `洋桔梗-已维护品种-销售订单参考数据_${new Date().getTime()}.xlsx`)
      },
      handleExportYjgCg(){
        this.download('system/importcg/exportYjgCg', {
          ...this.queryParams2
        }, `洋桔梗种苗—采购参考数据_${new Date().getTime()}.xlsx`)
      },
      handleExportSpecs(){
        this.download('system/importcg/exportSpecs', {
          ...this.queryParams2
        }, `洋桔梗种苗规格参考数据_${new Date().getTime()}.xlsx`)
      },
      handleExportCustomer(){
        this.download('system/importcg/exportCustomer', {
          ...this.queryParams2
        }, `洋桔梗种苗负责人参考数据_${new Date().getTime()}.xlsx`)
      },
      handleResamplingList(){
        this.download('system/importcg/exportResamplingList', {
          ...this.queryParams2
        }, `洋桔梗-需要补采-发货维度_${new Date().getTime()}.xlsx`)
      },
      handleExportDy(){
        this.download('system/importcg/exportDyList', {
          ...this.queryParams6
        }, `洋桔梗种苗-已满足且多余订单_${new Date().getTime()}.xlsx`)
      },
      handleExportBc(){
        this.download('system/importcg/exportBcList', {
          ...this.queryParams6
        }, `洋桔梗种苗未满足-需补采订单_${new Date().getTime()}.xlsx`)
      },
      handleExport864(){
        this.download('system/importcg/export864List', {
          ...this.queryParams6
        }, `洋桔梗种苗未满足-864穴-采购进度_${new Date().getTime()}.xlsx`)
      },
      handleExport1276(){
        this.download('system/importcg/export1276List', {
          ...this.queryParams6
        }, `洋桔梗种苗未满足-1276穴-采购进度_${new Date().getTime()}.xlsx`)
      },
      handleUnfulfilledList(){
        this.download('system/importcg/exportUnfulfilledList', {
          ...this.queryParams2
        }, `洋桔梗-未满足影响的订单_${new Date().getTime()}.xlsx`)
      },
      handleInventoryList(){
        this.download('system/importcg/exportInventoryList', {
          ...this.queryParams2
        }, `洋桔梗-多余种子去库存_${new Date().getTime()}.xlsx`)
      },
      handleInventoryDetailList(){
        this.download('system/importcg/exportInventoryDetailList', {
          ...this.queryParams5
        }, `洋桔梗-多余库存-明细_${new Date().getTime()}.xlsx`)
      },
      getQueryParams(){
        getQueryParams().then(res =>{
          if(res.code===200){
            this.depts = res.data.depts;
            this.sales = res.data.sales;
            this.customers = res.data.customers;
          }
        })
      },
    }
  };
  </script>
<style scoped>
  ::v-deep .el-progress-bar__outer {
    background-color: transparent;
    border-radius: 0; /* 移除底色圆角 */
  }

  ::v-deep .el-progress-bar {
    width: 700px; /* 设置长方形宽度 */
    height: 20px; /* 设置长方形高度 */
  }

  ::v-deep .el-progress-bar__inner {
    background-color: red; /* 设置进度条颜色 */
    height: 100%; /* 填充整个高度 */
    border-radius: 0 !important;  /* 移除圆角，使其变为方形 */
  }

  ::v-deep .el-progress-bar__innerText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #ee0505;
  }


  .progressmini ::v-deep(.el-progress-bar__outer) {
    background-color: transparent;
    border-radius: 0; /* 移除底色圆角 */
  }

  .progressmini ::v-deep .el-progress-bar {
    width: 200px; /* 设置长方形宽度 */
    height: 20px; /* 设置长方形高度 */
  }

  .progressmini2 ::v-deep .el-progress-bar {
    width: 380px; /* 设置长方形宽度 */
    height: 20px; /* 设置长方形高度 */
  }

  .progressmini2 ::v-deep .el-progress-bar__inner {
    background-color: rgb(28, 14, 88); /* 设置进度条颜色 */
    height: 100%; /* 填充整个高度 */
    border-radius: 0 !important;  /* 移除圆角，使其变为方形 */
  }

  .progressmini3 ::v-deep .el-progress-bar {
    width: 380px; /* 设置长方形宽度 */
    height: 20px; /* 设置长方形高度 */
    transform: scaleX(-1);
  }

  .progressmini3 ::v-deep .el-progress-bar__inner {
    background-color: red; /* 设置进度条颜色 */
    height: 100%; /* 填充整个高度 */
    border-radius: 0 !important;  /* 移除圆角，使其变为方形 */
  }

  .progressmini ::v-deep .el-progress-bar__inner {
    background-color: rgb(28, 14, 88); /* 设置进度条颜色 */
    height: 100%; /* 填充整个高度 */
    border-radius: 0 !important;  /* 移除圆角，使其变为方形 */
  }

  .progressmini ::v-deep .el-progress-bar__innerText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #ee0505;
  }


</style>
